<template>
  <div>
    <div @click="onTap">
      <slot></slot>
    </div>
    <div class="addressselectbox" v-if="isShow">
      <div class="before" @click="close"></div>
      <div class="body">
        <div class="close" @click="close">关闭</div>
        <div class="title">选择地区</div>
        <div class="selectTab">
          <div
            v-for="(item,index) in tabs"
            :key="index"
            @click="onTabTap(index)"
            :class="index==tabsIndex?'active':''"
          >{{item?item[tempValue[index]]?item[tempValue[index]].area:'请选择':''}}
          </div>
        </div>
        <div class="selectArea">
          <div v-for="(tabItem,tabIndex) in tabs" :key="tabIndex">
            <div v-if="tabsIndex==tabIndex">
              <div
                v-for="(item,index) in tabItem"
                :key="index"
                @click="onColumnTap(item,index)"
              >{{item.area}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Me from '@/dll/me'

  let fromstr = {
    me: 'me',
    jd: 'jd'
  }
  export default {
    name: 'areaSelect',
    props: {
      areavalue: {
        type: Array,
        value: []
      },
      fromstr: fromstr.me
    },
    data () {
      return {
        isShow: false,
        tabs: [],
        tabsIndex: 0,
        tempValue: []
      }
    },
    methods: {
      onTap () {
        this.show()
      },

      close () {
        this.isShow = false
        this.closeMask()
        //   this.$forceUpdate();
      },
      show () {
        this.isShow = true
        this.onMask()
        //   this.$forceUpdate();
        this.rtabs()
      },
      onTabTap (index) {
        this.tabsIndex = index
        //   this.$forceUpdate();
      },
      onColumnTap (item, index) {
        let tabs = this.tabs
        let tempValue = this.tempValue
        let tabindex = this.tabsIndex
        //   let areaItem = tabs[tabindex][index];
        tabs.splice(tabindex + 1, tabs.length)
        tempValue.splice(tabindex + 1, tabs.length)
        tempValue[tabindex] = index
        this.loadAreaList(item.id)
        document.getElementsByClassName('selectArea')[0].scrollTop = 0
      },
      async loadAreaList (id = 0) {
        let tabs = this.tabs
        let tabsIndex = this.tabsIndex
        if (tabsIndex >= 0) {
          tabsIndex++
        } else {
          tabsIndex = 0
        }
        let param = {
          parent_id: id,
          deep: tabsIndex
        }
        let getAreaList
        if (this.fromstr == 'jd') {
          getAreaList = Me.getJdAreaList
        } else {
          getAreaList = Me.getAreaList
        }
        let res = await getAreaList(param)
        if (res.code == 0 && res.data.length) {
          tabs.push(res.data)
          this.tabsIndex = tabsIndex
        } else {
          let res = []
          let tempValue = this.tempValue
          tabs.map((item, index) => {
            let i = item[tempValue[index]]
            res.push(i)
          })
          this.$emit('change', res)
          localStorage.jddzqy = JSON.stringify(res)
          this.close()
        }
      },
      async rtabs () {
        let value = this.areavalue || []
        let tabs
        let tempValue
        let getAreaList
        if (this.fromstr == 'jd') {
          getAreaList = Me.getJdAreaList
        } else {
          getAreaList = Me.getAreaList
        }
        if (value.length) {
          tabs = new Array(value.length)
          tempValue = new Array(value.length)

          let res = await getAreaList({})
          if (res.code == 0) {
            tabs[0] = res.data
            res.data.map((itme, index) => {
              if (itme.id == value[0].id) {
                tempValue[0] = index
              }
            })
          }
          value.map(async (item, index) => {
            tempValue.push(item.id)
            if (index >= value.length - 1) {
              return
            }
            let tabindex = index + 1
            let param = {
              parent_id: item.id,
              deep: tabindex
            }

            let res = await getAreaList(param)
            if (res.code == 0) {
              tabs[tabindex] = res.data
              res.data.map((itme, index) => {
                if (itme.id == value[tabindex].id) {
                  tempValue[tabindex] = index
                }
              })
            }
          })
          this.tabs = tabs
          this.tempValue = tempValue
          this.tabsIndex = value.length - 1
        } else {
          tabs = new Array(1)
          tempValue = new Array(1)
          let res = await getAreaList({})
          if (res.code == 0) {
            tabs[0] = res.data
          }
          this.tabs = tabs
          this.tempValue = tempValue
        }
        this.$forceUpdate()
      },

      onMask () {
        document.body.style.position = 'fixed'
        document.body.style.top = '0'
        document.body.style.bottom = '0'
        document.body.style.left = '0'
        document.body.style.right = '0'

        // let availWidth = window.screen.availWidth
        this.$nextTick(function () {
          // document.getElementsByClassName('body')[0].style.width = `${availWidth}px`
          // eslint-disable-next-line no-unused-expressions
          document.getElementsByClassName('screenItem-popup').length ? document.getElementsByClassName('screenItem-popup')[0].style.overflow = null : ''
        })
      },
      closeMask () {
        document.body.style.position = 'static'
        this.$nextTick(function () {
          // eslint-disable-next-line no-unused-expressions
          document.getElementsByClassName('screenItem-popup').length ? document.getElementsByClassName('screenItem-popup')[0].style.overflow = 'auto' : ''
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .addressselectbox {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: block;
  }

  .addressselectbox .before {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: rgba(45, 45, 45, 0.5);
  }

  .addressselectbox .body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 50%;
    height: 50%;
    width: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    z-index: 1000;
  }

  .addressselectbox .body .close {
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 40px;
    position: absolute;
    top: 0;
    right: 15px;
  }

  .addressselectbox .body .title {
    border-bottom: 1px solid #f5f5f5;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #666;
    text-align: center;
  }

  .addressselectbox .body .selectTab {
    display: flex;
    height: 40px;
    line-height: 40px;
    flex-wrap: nowrap;
    overflow: auto;
    border-bottom: 1px solid #f5f5f5;
  }

  .addressselectbox .body .selectTab > .active {
    color: #b0290f;
  }

  .addressselectbox .body .selectTab > div {
    margin-left: 15px;
  }

  .addressselectbox .body .selectArea {
    flex: 1;
    line-height: 40px;
    font-size: 14px;
    overflow: auto;
  }

  .addressselectbox .body .selectArea > div {
    padding: 0 15px;
  }

  .addressselectbox .body .selectArea .active {
    color: #b0290f;
  }
</style>
